<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/category.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/common.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/page.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/c/font_4586065_zr0eqag50cb.css">
</head>
<body>
<c:import url="header.jsp"></c:import>
<div id="bigbox">
    <div class="content">
        <div class="cheader">
            <div class="form">
                <span>分类名称：</span>
                <input type="text" placeholder="请填写分类名称" class="input_name" name="ByName">
                <button class="search" onclick="selectByName()">查询</button>
            </div>
            <button class="add">+ 新增分类</button>
        </div>
        <div class="center">
            <table cellspacing="0" id="tb">
                <thead>
                <tr>
                    <th>分类名称</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

        <div class="divpage">
            <span class="sum"></span>
            <select class="pageselect">
                <option>2条/页</option>
                <option>3条/页</option>
                <option>5条/页</option>
                <option>10条/页</option>
            </select>
            <div class="prev" style="display: inline-block">
                <i class="iconfont icon-shangyiyeqianyiye"></i>
            </div>
            <span class="skipPage">
                </span>
            <div class="next" style="display: inline-block">
                <i class="iconfont icon-xiayiyehouyiye"></i>
            </div>
            <span class="leavefor">
                前往
                <input type="text" class="el-input__inner">
                页
                </span>
        </div>
    </div>
</div>


<div class="addoverlay1">
    <div class="dialog">
        <div class="dheader">
            <span>新增商品分类</span>
            <span></span>
        </div>
        <div class="dbody">
            <div>
                <span>*</span>分类名称： <input type="text" placeholder="请输入分类名称" class="new_category"
                                               name="CategoryName">
            </div>
        </div>
        <div class="dfoot">
            <input type="button" name="cancel" class="cancelAdd1" value="取 消"/>
            <input type="button" name="confirm" class="confirmAdd1" value="确 定" onclick="add()"/>
            <input type="button" name="continue" class="continueAdd1" value="保存并继续添加" onclick="continueAdd1()"/>
        </div>
    </div>
</div>

<div class="updateOverlay">
    <div class="dialog">
        <div class="dheader">
            <span>修改商品分类</span>
            <span></span>
        </div>
        <div class="dbody">
            <div>
                <input type="hidden" class="updateCategory" value="">
                <span>*</span>分类名称： <input type="text" placeholder="请输入分类名称" class="update_category"
                                               name="CategoryUpdateName">
            </div>
        </div>
        <div class="dfoot">
            <input type="button" name="cancel" class="cancelUpdate" value="取 消"/>
            <input type="button" name="confirm" class="confirmUpdate" value="确 定" onclick="update(id)"/>
        </div>
    </div>
</div>

<c:import url="Leftnavigationbar.jsp"></c:import>

<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script>
    const page = {
        pageSize: 5,
        page: 1
    }

    $(function () {
        bind()
    })

    let pageCount = 0

    function bind() {
        $.ajax({
            type: 'post',
            url: '/categoryQuery?',
            data: {
                page: page.page,
                pageSize: page.pageSize,
                name: $('.input_name').val(),
            },
            success: function (data) {
                data = JSON.parse(data)
                if (!data.pageCount) {
                    document.querySelector('.center').style.display = 'none'
                    return document.querySelector('.divpage').style.display = 'none'
                }
                document.querySelector('.center').style.display = 'inline-block'
                document.querySelector('.divpage').style.display = 'block'
                // 渲染分页部分
                document.querySelector('.sum').innerHTML = '共 ' + data.pageCount + ' 页'

                document.querySelector('.skipPage').innerHTML = page.page

                document.querySelector('tbody').innerHTML = data.list.map(item => `
                <tr>
                    <td>` + item.name + `</td>
                    <td><p class="` + (item.status === 1 ? "enable" : "disable") + `"></p>` + (item.status === 1 ? "启用" : "禁用") + `</td>
                    <td data-id=` + item.id + `>
                        <button>修改</button>
                        <button data-name=` + item.name + `>删除</button>
                        <button class="button `+(item.status === 0 ? "statusEnable" : "statusDisable")+`">`+(item.status === 0 ? "启用" : "禁用")+`</button>
                    </td>
                </tr>`).join('')
                const ops = document.querySelectorAll('.pageselect option');
                for (const op of ops) {
                    if (op.innerHTML.includes(page.pageSize)) op.selected = "selected"
                }
                pageCount = data.pageCount
                if (page.page <= 1) {
                    document.querySelector('.prev').classList.add('pageDisabled')
                } else {
                    document.querySelector('.prev').classList.remove('pageDisabled')
                }
                if (page.page >= pageCount) {
                    document.querySelector('.next').classList.add('pageDisabled')
                } else {
                    document.querySelector('.next').classList.remove('pageDisabled')
                }
                document.querySelector('.el-input__inner').value = page.page
            }
        })
    }

    function selectByName() {
        page.page = 1
        bind()
    }

    document.querySelector('.pageselect').addEventListener('change', e => {
        page.page = 1
        page.pageSize = e.target.value.substring(0, e.target.value.indexOf('条'))
        bind()
    })
    document.querySelector('.prev').addEventListener('click', e => {
        if (page.page === 1) return
        document.querySelector('.next').classList.remove('pageDisabled')
        page.page--
        bind()
    })

    document.querySelector('.next').addEventListener('click', e => {
        if (page.page >= pageCount) return
        document.querySelector('.prev').classList.remove('pageDisabled')
        if (page.page === pageCount - 1) {
            document.querySelector('.next').classList.add('pageDisabled')
        }
        page.page++
        bind()
    })
    document.querySelector('.el-input__inner').addEventListener('blur', e => {
        if (e.target.value > pageCount || e.target.value < 1) {
            return
        }
        page.page = e.target.value
        bind()
    })

    // 修改状态
    function updateStatus(id, status) {
        $.ajax({
            type: 'get',
            url: '/categoryStatus',
            data: {
                id,
                status
            },
            success: function (data) {
                if (!isNaN(data)) {
                    document.querySelector('table p').classList.toggle('enabled')
                    document.querySelector('table p').classList.toggle('disabled')
                    bind()
                } else {
                    alert(JSON.parse(data))
                }
            }
        })

    }

    // 回显
    function echo(id) {
        $.ajax({
            type: 'get',
            url: '/CategoryEchoServlet',
            data: {id},
            success: function (data) {
                $('.updateCategory').val(JSON.parse(data).id)
                $('.update_category').val(JSON.parse(data).name)
            }
        })
    }

    // 删除方法
    function del(id, name) {
        if (confirm('您确定要删除分类为' + name + '的这条数据吗?', '提示')) {
            $.ajax({
                type: 'post',
                url: '/CategoryDeleteServlet',
                data: {id},
                success: function (data) {
                    if (data === 'ok') {
                        if (page.page > 1 && document.querySelectorAll('tbody tr').length === 1) {
                            page.page--
                        }
                        bind()
                    } else {
                        alert('分类被商品引用，无法删除')
                    }
                }
            })
        }
    }

    // 添加
    function add() {
        if ($('.new_category').val() === '' || $('.new_category').val() == null) {
            alert('请输入要添加的商品分类名称')
        } else {
            $.ajax({
                type: "post",
                url: "/CategoryAddServlet",
                data: {
                    CategoryName: $('.new_category').val()
                },
                success: function (data) {
                    if (data === 'ok') {
                        page.page = pageCount
                        const value = document.querySelector('.pageselect').value;
                        if (document.querySelectorAll('tbody tr').length === +value.substring(0, value.indexOf('条'))) {
                            page.page++
                        }
                        bind()
                        $('.addoverlay1').css('display', 'none')
                        $('.new_category').val('')
                    }
                }
            })
        }
    }

    // 修改
    function update() {
        $.ajax({
            type: "post",
            url: "/CategoryUpdateServlet",
            data: {
                CategoryUpdateName: $('.update_category').val(),
                id: $('.updateCategory').val()
            },
            success: function (data) {
                if (data === 'ok') {
                    bind()
                    $('.updateOverlay').css('display', 'none')
                    $('.update_category').val('')
                }
            }
        })
    }

    // 保存并继续添加
    function continueAdd1() {
        $.ajax({
            type: "post",
            url: "/CategoryAddServlet",
            data: {
                CategoryName: $('.new_category').val()
            },
            success: function (data) {
                if (data === 'ok') {
                    page.page = pageCount
                    const value = document.querySelector('.pageselect').value;
                    if (document.querySelectorAll('tbody tr').length === value.substring(0, value.indexOf('条'))) {
                        page.page++
                    }
                    bind()

                    $('.new_category').val('')
                }
            }
        })
    }

    document.querySelector('.input_name').addEventListener('mouseenter', e => {
        if (e.target.classList.contains('focus')) return
        e.target.style.border = '1px solid white'
        e.target.classList.add('hover')
    })
    document.querySelector('.input_name').addEventListener('mouseleave', e => {
        if (!e.target.classList.contains('focus')) e.target.style.border = '1px solid rgb(229, 228, 228)'

        e.target.classList.remove('hover')
    })

    document.querySelector('.input_name').addEventListener('focus', e => {
        if (e.target.classList.contains('hover')) e.target.classList.remove('hover')
        e.target.style.border = '1px solid white'
        e.target.classList.add('focus')
    })
    document.querySelector('.input_name').addEventListener('blur', e => {
        e.target.style.border = '1px solid rgb(229, 228, 228)'
        e.target.classList.remove('focus')
    })
    document.querySelector('.search').addEventListener('click', e => {
        e.target.style.opacity = '1'
        setTimeout(() => {
            e.target.style.opacity = '0.5'
        }, 100)
    })
    document.querySelector('.search').addEventListener('mouseenter', e => {
        e.target.style.opacity = '0.5'
    })
    document.querySelector('.search').addEventListener('mouseleave', e => {
        e.target.style.opacity = '1'
    })
    document.querySelector('.new_category').addEventListener('mouseenter', e => {
        if (e.target.classList.contains('focus')) return
        e.target.style.outline = '1px solid white'
        e.target.style.border = '1px solid rgb(186, 192, 205)'

    })
    document.querySelector('.new_category').addEventListener('mouseleave', e => {
        if (!e.target.classList.contains('focus')) e.target.style.border = '1px solid rgb(229, 228, 228)'
        e.target.classList.remove('hover')
    })

    document.querySelector('.new_category').addEventListener('focus', e => {
        if (e.target.classList.contains('hover')) e.target.classList.remove('hover')
        e.target.style.border = '1px solid rgb(168, 240, 135)'
        e.target.classList.add('focus')
    })
    document.querySelector('.new_category').addEventListener('blur', e => {
        e.target.style.border = '1px solid rgb(229, 228, 228)'
        e.target.classList.remove('focus')
    })
    // 事件
    document.querySelector('.add').addEventListener('click', () => {
        document.querySelector('.addoverlay1').style.display = 'block'
    })
    document.querySelector('.cancelAdd1').addEventListener('click', () => {
        document.querySelector('.addoverlay1').style.display = 'none'
    })
    document.querySelector('.confirmAdd1').addEventListener('click', () => {
        document.querySelector('.addoverlay1').style.display = 'none'
    })
    document.querySelector('table').addEventListener('click', function (e) {
        if (e.target.innerHTML === '修改') {
            document.querySelector('.updateOverlay').style.display = 'block'
            echo(e.target.parentNode.dataset.id)
        } else if (e.target.innerHTML === '删除') {
            del(e.target.parentNode.dataset.id, e.target.dataset.name)
        } else if (e.target.innerHTML === '启用' || e.target.innerHTML === '禁用') {
            updateStatus(e.target.parentNode.dataset.id, e.target.innerHTML === '禁用' ? 0 : 1)
        }
    })
    document.querySelector('.cancelUpdate').addEventListener('click', () => {
        document.querySelector('.updateOverlay').style.display = 'none'
    })
    document.querySelector('.confirmUpdate').addEventListener('click', () => {
        document.querySelector('.updateOverlay').style.display = 'none'
    })
</script>
</body>
</html>
